<template>
    <div class="container" @click="onClick" >
        <div class="img-container">
            <img class="img" src="../../static/resource-icon/course.png"/>
        </div>
        <div class="name">{{data.name}}</div>
        <text class="time">{{data.create_time[0] + "  "+ data.create_time[1]}}</text>
        <more :old_data="old_data" :data="{...data, type:3}" ></more>
    </div>
</template>

<script setup>
import { Course } from "../../model/resource";
import router from "../../route";
import store from "../../store";
import more from "./more.vue"
const props = defineProps(['data', 'old_data'])
async function onClick(){
    store.commit('changeStage', {
        name: `${router.currentRoute.value.name}.chapter`,
        new_data: (await new Course().get(props.data.id)).chapters,
        old_data: props.old_data
    })
}
</script>

<style lang="scss" scoped>
.container {
    background-color: #ddf5f6 !important;
    border-radius: 5%;
    width: 180px !important;
    display: flex;
    flex-direction: column;
    margin: 5px !important;
}

.img-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 130px;
    align-content: center;
}
.img{
    //width: 20%;
    width: 150px;
    height: 110px;
    border-radius: 3%;
    margin-bottom: 3px;
    align-self: center;
}

.name{
    color: #2d562a;
    font-size: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    line-height: 22px;
    overflow: hidden; //超出的文本隐藏

    text-overflow: ellipsis; //溢出用省略号显示
    display: -webkit-box;
    -webkit-line-clamp: 2; // 超出多少行
    -webkit-box-orient: vertical;
}
.time{
    margin-top: 4px;
    color: #a1ae9e;
    font-size: 13px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}



</style>